    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动条案例</title>
        <script src="publicfunction.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            border: 2px solid rgba(48, 28, 173, 0.43);
            width: 300px;
            height: 400px;
            position: relative;
            left: 100px;
            top: 50px;
            overflow: hidden;
        }
        #content{
            font-size: 14px;
            font-weight: 500;
            padding: 5px;
        }
        #barC{
            width: 8%;
            height: 100%;
            background: #ccc;
            position: absolute;
            right: 0;
            top: 0;
        }
        #bar{
            width: 100%;
            height: 100px;
            background: #faff1b;
            border-radius: 10px;
            top: 0;
            position: absolute;
        }
    </style>
    <body>
    <div id="main">
        <div id="content">
            &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;抗瘟疫<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;  &nbsp; ----吴劲松<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            本该新春华夏庆，无奈疫情笼中华。<br>
            地铁中枢严把关，一丝不苟申通人。<br>
            日巡夜检不懈怠，守护家人暂无暇。<br>
            上下一心克魔疫，定把春风送万家。<br>
            --------------end--------------<br>
        </div>
        <div id="barC">
            <div id="bar"></div>
        </div>
    </div>
    <script>
        var main=document.getElementById("main");
        var content=document.getElementById('content');
        var barC=main.children[1];
        var bar=barC.children[0];
        bar.onmousedown=function (event) {
            event=event||window.event;
            var pageY1=event.pageY||scroll().top+event.clientY;
            var y=pageY1-bar.offsetTop;//鼠标在bar中的高度
//重新设置bar的高度 bar高度/barC的高度=main的高度/content的高度
           var barHeight=barC.offsetHeight*main.offsetHeight/content.offsetHeight;
           console.log("barHeight"+barHeight);


            // console.log("pageY1"+pageY1);
            // console.log("main.offsetTop"+main.offsetTop);
            // console.log(y);
           document.onmousemove=function (event) {
               event=event||window.event;
               var pageY2=event.pageY||scroll().top+event.clientY;

              var yy=pageY2-y;
              if(yy<0){
                  yy=0;
              }
              if (yy>(barC.offsetHeight-bar.offsetHeight)){
                  yy=barC.offsetHeight-bar.offsetHeight;
              }
              bar.style.top=yy+'px';
               window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
//求出比例系数（content.offsetHeight-main.offsetHeight）/(content走的距离)=(barC.offsetHeight-bar.offsetHeight)/bar走的距离
             var contentDis=(content.offsetHeight-main.offsetHeight)*yy/(barC.offsetHeight-bar.offsetHeight);
             content.style.marginTop=-contentDis+'px';//因为没有定位所以用marginTop来定位 margin就是定位在盒子内部的

           }
        };
        document.onmouseup=function () {
            document.onmousemove=null;
        }
    </script>
    </body>
    </html>